<template>
  <div class="ymdiv">
    <div class="descriptions">
      <el-descriptions title="课件详情" direction="vertical" :column="3" :size="3" border>
        <el-descriptions-item label="课件名称"
          ><el-input v-model="kcname" placeholder="名称" v-if="xghidden == true" />
          <p v-if="xghidden == false">123</p></el-descriptions-item
        >
        <el-descriptions-item label="预览课件" v-if="xghidden == false"> <el-button type="primary" @click="">预览</el-button></el-descriptions-item>
        <el-descriptions-item :span="4" label="备注"
          ><el-input v-model="kcname" placeholder="备注" v-if="xghidden == true" />
          <p v-if="xghidden == false">我是备注</p></el-descriptions-item
        >
        <el-descriptions-item label="是否公开" :span="1">
          <el-tag v-if="xghidden == false" class="ml-2" type="success">是</el-tag>
          <el-switch v-if="xghidden == true" v-model="ispublic" style="--el-switch-on-color: #13ce66" inline-prompt active-text="是" inactive-text="否"
        /></el-descriptions-item>
        <el-descriptions-item :span="4" label="添加时间" v-if="xghidden == false">2022-5-10 12:00:00</el-descriptions-item>
        <el-descriptions-item :span="4" v-if="xghidden == true" label="修改课件"
          ><el-upload ref="upload" class="upload-demo" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1" :auto-upload="false">
            <template #trigger>
              <el-button type="primary">选择文件</el-button>
            </template>
          </el-upload></el-descriptions-item
        >
        <el-descriptions-item label="操作"
          ><el-button type="primary" v-if="xghidden == false" @click="xg()">修改</el-button> <el-button type="success" v-if="xghidden == true" @click="bcok()">保存</el-button></el-descriptions-item
        >
      </el-descriptions>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { reactive, toRefs } from '@vue/reactivity';
import { useRoute } from 'vue-router';
export default defineComponent({
  setup() {
    const data = reactive({
      xghidden: false,
      kcname: '',
      ispublic: '',
    });
    const $route = useRoute();
    const xg = () => {
      data.xghidden = true;
    };
    const bcok = () => {
      data.xghidden = false;
    };
    return {
      ...toRefs(data),
      xg,
      bcok,
    };
  },
});
</script>
<style scoped>
.descriptions {
  padding: 20px;
}
</style>
